<template>
	<view class="content">
		<form>
			<view class="form-input">
				<view class="left">手机号码</view>
				<input class="uni-input" v-model="mobile" type="number" placeholder="请输入新手机号" />
			</view>
			<view class="form-input">
				<view class="left">验证码</view>
				<input class="uni-input" style="width:auto;" v-model="smscode" type="number" placeholder="当前登录骑手验证码" />
				<view class="sms-code" @click="sendCode">获取验证码</view>
			</view>
			<button class="common-btn" @click="submit">确定</button>
		</form>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				mobile: '',
				smscode: ''
			}
		},
		onLoad() {

		},
		methods: {
			sendCode() {
				let mobile = uni.getStorageSync('riderMobile')
				// if (!(/^[1][3-9][0-9]{9}$/.test(this.mobile))) {
				// 	uni.showToast({
				// 		title: '请输入正确的手机号',
				// 		icon: 'none'
				// 	});
				// 	return;
				// }
				const formData = {
					mobile: mobile,
				}
				this.$http.sendmns(formData).then((res) => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				})
			},
			submit() {
				if (!(/^[1][3-9][0-9]{9}$/.test(this.mobile))) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}
				if (!((this.smscode))) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return;
				}
				const formData = {
					mobile: this.mobile,
					code: this.smscode,
				}
				this.$http.setmobile(formData).then(res => {
					console.log(res)
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					if (res.code === 0) {
						uni.removeStorageSync("riderToken");
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/member/horseman/login'
							});
						}, 1000);
					}
				});
			},
		},
	}
</script>

<style scoped>
	.content {
		padding: 10px 4%;
		width: 100%;
	}

	.common-btn {
		width:618upx;
		height:80upx;
	
		background: linear-gradient(124deg, #6AA7E8 0%, #3D9AFD 100%);
box-shadow: none;
		border-radius:48upx;
		color: #FFFFFF;
		text-align: center;
		font-size: 16px;
		font-weight: bold;
		line-height: 80upx;
		margin-top: 31px;
	}
	.left{
		color: rgba(36, 36, 36, 1);
		font-size: 14px;
		font-weight:bold;
	}

	/* 表单样式 */
	.form-input {
		font-size: 14px;
		position: relative;
		padding: 0 4%;
		display: flex;
		background: rgba(187, 187, 187, 0.1);
		border-radius: 5px;
		margin-top: 15px;
		line-height: 46px;
		height: 46px;
	}

	.form-input .left {
		width: 80px;
	}

	.uni-input {
		line-height: 46px;
		height: 46px;
		font-size: 14px;
		width: 70%;
	}

	.common-btn:after {
		border: 0;
	}

	.common-btn2 {
		background: none;
		box-shadow: none;
		border: solid 1px #242424;
		color: #000;
	}

	/* 注册登陆 */
	.logo {
		padding: 20px 0;
		text-align: center;
	}

	.logo uni-image,
	.logo image {
		width: 80px;
		height: 60px;
	}

	.sms-code {
		position: absolute;
		right: 4%;
		top: 0;
		color: #3E9AFC;
	}
</style>
